<template>
  <div class="log-container">
    <ButtonGroup
      v-if="showBtn"
      :options="topButton"
      class="button-container"
      @click="handleButtonClick"
    />
    <MainTableList
      :columns="columns"
      :data-source="dataSource"
      :row-selection="getRowSelection"
      :loading="loading"
      :pagination="paginationMixin"
      :scroll="getScroll"
      slot-name="addressNo"
      @change="handleTableChange"
      @number-click="handleNumberClick"
    />
    <DialogAddress
      ref="formAddress"
      :visible.sync="visible"
      :code="code"
      :form-info="formData"
      :title="title"
      :show-detail="showDetail"
      @change="handleInsertChange"
    />
  </div>
</template>

<script>
import MainTableList from './mainTableList.vue';
import { postAddressListByPage, postAddressDelete } from '@/api/customerApi.js';
import mixinTable from '@/mixins/mixin-table.js';
import DialogAddress from '@/components/dialog/DialogAddress.vue';
export default {
  components: {
    DialogAddress,
    MainTableList,
  },
  mixins: [mixinTable],
  props: {
    code: {
      type: [String, Number],
      default: '',
    },
    showBtn: {
      type: Boolean,
      default: false
    },
    rowSelection: {
      type: Object,
      default: () => {},
    },
    showDetail: {
      type: Boolean,
      default: false
    },
    keyTabs: {
      type: String,
      default: '4',
    },
  },
  data() {
    return {
      // list: [],
      visible: false,
      loading: false,
      formData: {},
      title: ''
    };
  },
  computed: {
    // getFormData() {
    //   return Object.keys(this.formData).length || 0;
    // },
    getRowSelection() {
      return this.showBtn ? this.rowSelectionMixin : this.rowSelection
    },
    getScroll() {
      return this.showBtn ? { x: '100%', y: '53vh' } : { x: '100%', y: 300 }
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '地址编号',
          dataIndex: 'addressNo',
          ellipsis: true,
          scopedSlots: { customRender: 'addressNo' },
        },
        {
          align: 'center',
          title: '国家',
          dataIndex: 'country',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '省份',
          dataIndex: 'province',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '城市',
          dataIndex: 'city',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '街道',
          dataIndex: 'street',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '详细地址',
          dataIndex: 'address',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '邮政编码',
          dataIndex: 'postalCode',
          ellipsis: true,
        },
        {
          align: 'center',
          title: '备注',
          dataIndex: 'remark',
          ellipsis: true,
        },
      ];
      return columns;
    },
    topButton() {
      const disabled = !this.rowSelectionMixin.selectedRowKeys.length;
      return [
        {
          key: 'add',
          type: 'primary',
          label: '新增',
          icon: 'plus',
        },
        {
          key: 'delete',
          label: '删除',
          icon: 'delete',
          disabled,
        },
      ];
    },
  },
  watch: {
    keyTabs: {
      handler(newVal) {
        newVal === '4' && this.getList();
      },
      immediate: true,
    }, 
  },
  created() {
    // this.getList();
  },
  methods: {
    handleInsertChange() {
      this.getList();
    },
    getParams() {
      const page = {
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        customerCode: this.code,
      };
      return page;
    },
    async getList() {
      const data = this.getParams()
      this.loading = true;
      const result = await postAddressListByPage(data).finally(() => (this.loading = false));
      this.dataSource = result?.data?.data?.records || [];
      this.paginationMixin.total = result?.data?.data?.total || 0;
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    addCallback() {
      this.visible = true
      this.formData = {}
      this.title = '新增地址'
    },
    async deleteCallback() {
      const selectedRowKeys = this.rowSelectionMixin.selectedRowKeys || [];

      try {
        await this.$confirm(
          `是否删除该地址？共 ${selectedRowKeys.length} 条，是否确认？`
        );
        let res = await postAddressDelete(selectedRowKeys);
        if (res?.data?.data) {
          this.$message.success('删除成功');
          this.rowSelectionMixin.selectedRowKeys = [];
          this.paginationMixin.current = 1
          this.getList();
        } else {
          this.$message.success('删除失败');
        }
      } catch (error) {
        this.$message.success('删除失败');
        // console.log(error);
      }
    },
    // 编号点击
    async handleNumberClick(record) {
      console.log('record:', record);
      await this.$refs.formAddress.$nextTick(() => {})
      this.formData = record
      // if (this.getFormData) {
      //   this.visible = true
      // }
      this.visible = true
      this.title = '编辑地址'
      if (this.showDetail) {
        this.title = '地址详情'
      }
    },
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.paginationMixin = page;
      this.getList();
    }
  },
};
</script>

<style lang="less" scoped>
.log-container {
  width: 100%;
}
// .item-container {
//   display: flex;
//   align-items: center;
// }
// .button-container {
//   margin-bottom: 20px;
// }
// .table-container {
//   margin-bottom: 40px;
// }
// /deep/ .poros-select-selection {
//   border: none;
// }
</style>
